<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		h2 {
			margin-top: 10px;
			font-size: 22px;
			font-weight: 500;
			text-align: center;
		}

		.login {
			position: relative;
			width: 430px;
			height: 240px;
			position: fixed;
			top: 50%;
			left: 50%;
			margin-left: -215px;
			margin-top: -120px;
			z-index: 101;
			background: #fff;
			display: none;
			/* background: #000;	 */
			/* border: 1px solid red; */
			/* text-align: center; */
			clear: both;

		}

		.login .login_hd {
			font-size: 20px;
			height: 46px;
			line-height: 46px;
			font-weight: 500;
			text-align: center;
		}

		.login label,
		input {
			font-size: 12px;
		}

		.login label {
			margin-left: 30px;
			margin-right: 14px;

		}

		.login input[type="text"],
		.login input[type="password"] {
			margin-top: 17px;
			width: 294px;
			height: 31px;
			line-height: 31px;
			text-indent: 8px;
			outline: none;
			border: 1px solid #ccc;

		}

		.login .pwd_label {
			margin-left: 18px;
			margin-right: 14px;

		}

		.login input[type="submit"] {
			margin-top: 24px;
			margin-left: 106px;
			width: 216px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			outline: none;
			background: #ccc;
			border: 1px solid #ccc;
			cursor: pointer;

		}

		.login .close {
			position: absolute;
			box-sizing: border-box;
			right: -18px;
			top: -20px;
			width: 36px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			font-size: 12px;
			border-radius: 50%;
			background: #fff;
			cursor: pointer;

			/* border: 1px solid red; */
		}

		.login_bg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			display: none;

		}
	</style>
</head>

<body>
	<div class="model_header">
		<h2>点击，弹出登录框</h2>

	</div>

	<div class="login">
		<p class="login_hd">登录会员</p>
		<div class="close">关闭</div>
		<label for="user_name">用户名:</label><input type="text" name="user_name" placeholder="请输入用户名"
			id="user_name" /><br />
		<label for="user_passwd" class="pwd_label">登录密码:</label><input type="password" name="user_passwd"
			placeholder="请输入登录密码" id="user_passwd" /><br />

		<input type="submit" value="登录会员" />
	</div>
	<!-- 半透明遮罩层 -->
	<div id="bg" class="login_bg"></div>

	<script>
		// 需求：1.点击，弹出登录框，会显示登录界面和遮罩层
		// 2.鼠标按下登录框，移动鼠标会和登录框一起移动，鼠标弹起就不能移动登录框
		// 3.点击关闭，隐藏登录框和遮罩层

		// 获取元素
		var h2 = $(".model_header")[0];
		var login = $(".login")[0];
		var bg = $("#bg")[0];
		var closeBtn = $(".close")[0];

		h2.onclick = function () {
			login.style.display = "block";
			bg.style.display = "block";

			closeBtn.onclick = function () {
				login.style.display = "none";
				bg.style.display = "none";
			}



		}
		login.onmousedown = function (e) {
			e = e || window.event;
			var x = e.pageX - login.offsetLeft;
			var y = e.pageY - login.offsetTop;

			document.onmousemove = function (ev) {
				ev = ev || window.event;
				login.style.left = ev.pageX - x + 215 + 'px';
				login.style.top = ev.pageY - y + 120 + 'px';
			}
			document.onmouseup = function () {
				document.onmousemove = null;
			}
		}
		function $(select) {
			return document.querySelectorAll(select);
		}
	</script>
</body>

</html>